<template>
  <div id="pagepanelname">
    <div>
      <Viewer ref="viewerRef" :reportName="selectedRpt" :reportParamter="reportParameter" :isShowParamPanel="true" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, computed, toRefs, watch } from 'vue';
import '@grapecity/ar-viewer/dist/jsViewer.min.js';
import '@grapecity/ar-viewer/dist/jsViewer.min.css';
import Viewer from './components/Viewer.vue';

let { proxy }: any = getCurrentInstance();

let reportList = reactive([]);
let selectedRpt: any = ref('');
let reportParameter = reactive({}) as any;

watch(
  () => proxy.$router.currentRoute,
  (to, from) => {
    proxy.$nextTick(() => {
      proxy.selectedRpt = proxy.$route.query.param;
      setTimeout(() => {
        proxy.reportParameter = {
          id: 't' + new Date().valueOf(),
          reportId: proxy.$route.query.param,
          reportParams: null
        };
      }, 500);
    });
  }
);

function created() {
  proxy.reportList = [
    'AcmeStore.rdlx',
    'AnnualRpt.rdlx',
    'Invoice.rdlx',
    'InvoiceList.rdlx',
    'Project & Resource Analysis - Staff Performance Analysis.rdlx',
    'Statistical analysis scatter plot.rdlx',
    'User defined report columns.rdlx',
    'Invoice.rpx',
    'Invoice_Colored.rpx'
  ]; //result;
  proxy.selectedRpt = proxy.$route.query.param; //this.reportList[0];
}
</script>
<style lang="scss" scoped >
#pagepanelname {
  background-color: #fff;
  overflow-x: hidden;
}

#content {
  height: unset !important;
}
</style>